<!DOCTYPE html>
<html ng-app="sample-app" id="ng-app" class="js">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular directive: lazy image directive, inspired by TIF - alt and classname</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- look inside this css to see how container and ratios work -->
    <link rel="stylesheet" type="text/css" href="lazy-image-style.css" />
    <!-- only for our sample demo app -->
    <link rel="stylesheet" type="text/css" href="css/app.css" />

</head>
<body ng-controller="appCtrl" >

<div class="demo-wrapper">

    <h1>Angular lazy image directive</h1>
    <h2>Using image alt and className</h2>
	<!-- example how to use image set using srcset and ratio -->
	<div ng-repeat="image in images">

		<div afkl-lazy-image="//placehold.it/768x384/00a1de/ffffff" class="afkl-lazy-wrapper afkl-img-ratio-2-1" afkl-lazy-image-options='{"alt": "blue bird", "className": "optional-image-class"}'></div>

	</div>

    <p><a href="index.html">back</a></p>

</div>

<!-- only dependency is Angular -->
<script src="vendor/angular.min.js"></script>
<!-- our ng lazy image module -->
<script src="lazy-image.js"></script>

<!-- dummy app kickstarting our module -->
<script src="js/app.js"></script>

</body>
</html>
